<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- meta:desc -->
  <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
  <!-- meta:kw -->
  <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
  <title>小兔鲜儿-新鲜、惠民、快捷！</title>
  <title>Document</title>
  <!-- 1 网页的小图标 -->
  <!-- ink:favicon -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- 2 引入样式文件 -->
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 1 顶部导航 -->
  <div class="top-nav">
    <div class="main">
      <ul>
        <li class="active"><a href="#">请先登录</a></li>
        <li><a href="#">免费注册</a></li>
        <li><a href="#">我的订单</a></li>
        <li><a href="#">会员中心</a></li>
        <li><a href="#">帮助中心</a></li>
        <li><a href="#">在线客服</a></li>
        <li><a href="#"> <span class="iconfont icon-mobile-phone"></span> 手机版</a></li>
      </ul>
    </div>
  </div>

  <!-- 2 顶部分类 -->
  <div class="top-cate main">
    <!-- 2.1  logo -->
    <a href="#" class="logo">
      <img src="./images/logo.png" alt="">
    </a>
    <!-- 2.2  分类菜单 -->
    <ul class="cate">
      <li><a href="#">首页</a></li>
      <li><a href="#">生鲜</a></li>
      <li class="active"><a href="#">美食</a></li>
      <li><a href="#">餐厨</a></li>
      <li><a href="#">电器</a></li>
      <li><a href="#">居家</a></li>
      <li><a href="#">洗护</a></li>
      <li><a href="#">孕婴</a></li>
      <li><a href="#">服装</a></li>
    </ul>
    <!-- 2.3  搜索 -->
    <div class="search-row">
      <span class="iconfont icon-search"></span>
      <input type="text" placeholder="搜一搜">
    </div>
    <!-- 2.4  购物车 -->
    <div class="shopping-cart">
      <span class="iconfont icon-cart-full"></span>
      <i>2</i>
    </div>
  </div>

  <!-- 3 banner -->
  <div class="banner  main">
    <ul>
      <li><a href="#">
          <p> 生鲜 水果 蔬菜 </p> <span class="iconfont icon-arrow-right-bold"></span>
        </a></li>
      <li><a href="#">
          <p> 美食 面点 干果 </p> <span class="iconfont icon-arrow-right-bold"></span>
        </a></li>
      <li><a href="#">
          <p> 餐厨 数码产品 </p> <span class="iconfont icon-arrow-right-bold"></span>
        </a></li>
      <li><a href="#">
          <p> 电器 床品 四件套 被枕 </p> <span class="iconfont icon-arrow-right-bold"></span>
        </a></li>
      <li><a href="#">
          <p> 居家 奶粉 玩具 辅食 </p> <span class="iconfont icon-arrow-right-bold"></span>
        </a></li>
      <li><a href="#">
          <p> 洗护 洗发 洗护 美妆 </p> <span class="iconfont icon-arrow-right-bold"></span>
        </a></li>
      <li><a href="#">
          <p> 孕婴 奶粉 玩具 </p> <span class="iconfont icon-arrow-right-bold"></span>
        </a></li>
      <li><a href="#">
          <p> 服饰 女装 男装 </p> <span class="iconfont icon-arrow-right-bold"></span>
        </a></li>
      <li><a href="#">
          <p> 杂货 户外 图书 </p> <span class="iconfont icon-arrow-right-bold"></span>
        </a></li>
      <li><a href="#">
          <p> 品牌 品牌制造 </p> <span class="iconfont icon-arrow-right-bold"></span>
        </a></li>
    </ul>
  </div>



</body>

</html>